<template>
  <div class="message-container">
    <div class="message-list">
      <vuedraggable class="wrapper" v-model="$store.state.messages">
        <div
          v-for="msg in $store.state.messages"
          :key="msg.msgID"
          class="message-item"
        >
          <!-- 类型 -->
          <el-select
            v-model="msg.type"
            placeholder="类型"
            class="user-select"
            @change="typeHandle($event, msg)"
          >
            <el-option
              v-for="type in $store.state.msgTypeList"
              :key="type"
              :label="type"
              :value="type"
            >
            </el-option>
          </el-select>
          <!-- 用户 -->
          <el-select
            v-model="msg.userID"
            slot="prepend"
            placeholder="选择用户"
            class="user-select"
            :disabled="disableUser(msg.type)"
          >
            <el-option
              v-for="item in $store.state.userList"
              :label="item.name"
              :value="item.id"
              :key="item.userID"
            ></el-option>
          </el-select>
          <!-- 转账状态 -->
          <el-select
            v-model="msg.receiveState"
            slot="prepend"
            placeholder="接收状态"
            class="user-select"
            style="width: 140px"
            v-show="showReceive(msg.type)"
          >
            <el-option
              v-for="item in states(msg.type)"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
          <!-- 被领取红包对象 -->
          <el-select
            v-model="msg.redenvOwnerID"
            slot="prepend"
            placeholder="红包主人"
            class="user-select"
            style="width: 140px"
            v-show="showRedenv(msg.type)"
          >
            <el-option
              v-for="item in redenvOwners(msg.userID)"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
          <!-- 内容 -->
          <el-input
            :placeholder="placeholder(msg.type)"
            v-model="msg.info"
            class="input-with-select"
            style=""
            v-if="showTime(msg.type)"
          >
          </el-input>
          <!-- 时间 -->
          <el-date-picker
            v-else
            v-model="msg.info"
            class="time-pick"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <!-- 删除 -->
          <el-button
            slot="append"
            icon="el-icon-delete"
            type="danger"
            class="delete-msg"
            @click="delMessage(msg.msgID)"
          ></el-button>
          <!-- 排序 -->
          <el-button
            slot="append"
            type="primary"
            class="delete-msg"
            draggable="false"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-tuozhuaicaidandaohang"></i>
          </el-button>
        </div>
      </vuedraggable>
    </div>
    <!-- <button id="add-message" >添加信息</button> -->
    
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  data() {
    return {
      receiveStates: [
        {
          value: 0,
          label: "未接收",
        },
        {
          value: 1,
          label: "发起者-已接收",
        },
        {
          value: 2,
          label: "接收者-已接收",
        },
      ],
    };
  },
  components: {
    vuedraggable,
  },
  methods: {
    delMessage(id) {
      this.$store.commit("delMessage", id);
    },
    typeHandle(newType, msg) {
      if (newType == "时间") {
        let time = new Date();
        msg.info = time;
      } else if (newType == "红包") {
        msg.info = "恭喜发财，大吉大利";
      } else if (newType == "转账") {
        msg.info = 20;
      } else if (newType == "时间") {
      } else if (newType == "时间") {
      } else if (newType == "时间") {
      }
    },
  },
  computed: {
    placeholder() {
      return function (type) {
        let resultMap = {
          文本: "请输入内容",
          转账: "请输入金额",
          时间: "请输入时间",
          红包: "请输入红包文案",
          领取红包: "A领取了B的红包",
        };
        return resultMap[type];
      };
    },
    disableUser() {
      return function (type) {
        if (type == "时间") return true;
        return false;
      };
    },
    showTime() {
      return function (type) {
        if (type == "时间") return false;
        return true;
      };
    },
    defaultTime() {
      let time = new Date();
      let h = time.getHours();
      let m =
        time.getMinutes() > 10 ? time.getMinutes() : "0" + time.getMinutes();
      let s =
        time.getSeconds() > 10 ? time.getSeconds() : "0" + time.getSeconds();
      // return `${h}:${m}:${s}`
      return time;
    },
    showReceive() {
      return function (type) {
        if (type == "转账" || type == "红包") return true;
        return false;
      };
    },
    showRedenv() {
      return function (type) {
        if (type == "领取红包") return true;
        return false;
      };
    },
    redenvOwners() {
      return function (id) {
        return this.$store.getters.getOwners(id);
      };
    },
    states() {
      return function (type) {
        if (type == "转账")
          return [
            {
              value: 0,
              label: "未接收",
            },
            {
              value: 1,
              label: "发起者-已接收",
            },
            {
              value: 2,
              label: "接收者-已接收",
            },
          ];
        else
          return [
            {
              value: 0,
              label: "未接收",
            },
            {
              value: 1,
              label: "已接收",
            },
          ];
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.message-container {
  position: relative;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  background-color: white;
  .message-list {
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #68c3ff;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0);
    }
  }
}
.message-item {
  display: flex;
  margin-top: 5px;
  margin-bottom: 5px;
  .user-select {
    border: 0;
    flex-shrink: 0;
    text-align: center;
    &:nth-child(1) {
      width: 110px;
    }
    &:nth-child(2) {
      width: 110px;
    }
  }
  .time-pick {
    flex-grow: 1;
  }
  .delete-msg {
    // flex-grow: 1;
  }
}
.el-input-group__prepend {
  background-color: #fff;
}
</style>